<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.15rem;
      }

      .top-content {
        text-align: center;
      }

      .top-img {
        display: block;
        width: 1.5rem;
        margin: auto;
      }

      .top-title {
        font-size: 0.3rem;
        word-spacing: 10px;
        margin: 0.6rem 0;
      }

      .top-text {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .top-input {
        width: 200px;
      }

      .top-input .el-input__wrapper {
        box-shadow: none;
        border-bottom: 1px solid #333;
        border-radius: 0;
        text-align: center;
      }

      .top-input .el-input__inner {
        text-align: center;
      }

      .top-text span {
        display: inline-block;
        font-size: 0.22rem;
        width: 1rem;
        text-align: justify;
        text-align-last: justify;
      }

      .top-company {
        font-size: 0.2rem;
        word-spacing: 10px;
      }

      .red-text {
        color: red;
      }
    </style>
  </head>

  <body>
    <div class="table-content" id="menu">
      <h3 style="font-size: 0.25rem">目　　录</h3>
      <div class="people-top" v-for="(item,index) in list" :key="index" style="line-height: 40px;">
        <div class="font-14">{{item.title}}</div>
        <div>{{item.page}}</div>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const menu3Composition = {
        setup() {
          const list = ref([
            {
              title: "员工健康状况调查表",
              page: 1,
            },{
              title: "员工入场三级安全教育登记表",
              page: 2,
            },{
              title: "员工入场安全教育考试试题（厨师）",
              page: 3,
            },{
              title: "正确使用安全防护用品承诺书",
              page: 5,
            },{
              title: "正确使用安全防护用品承诺书",
              page: 6,
            },{
              title: "安全责任书",
              page: 7,
            },{
              title: "消防安全承诺书",
              page: 9,
            },{
              title: "岗位危险告知书",
              page: 10,
            },{
              title: "职业危害告知书",
              page: 11,
            },{
              title: "安全操作规程告知书",
              page: 12,
            },
          ]);

          return {
            list,
          };
        },
      };
      console.log(menu3Composition);
      const app = createApp(menu3Composition).mount("#menu");
    </script>
  </body>
</html>
